<template>
  <div class="person_page">
    <div class="person wrap">
      <Crumb :nav="[{ name: '首页' }, { name: '个人中心' }]"></Crumb>
      <main>
        <aside>
          <div class="avatar">
            <img
              src="../assets/img/启明.jpg"
              style="text-align: center; width: 100px; height: 100px"
            />
          </div>
          <div class="name">
            姜刘旭
            <span @click="loginOutFn" style="cursor: pointer">[退出]</span>
          </div>
          <div class="title">
            <img src="../assets/img/启明.jpg" width="20" alt="交易管理" />
            交易管理
          </div>
          <ul class="list">
            <li :class="isshowcart == true ? 'active' : ''" @click="cart">
              购物车
            </li>
          </ul>
          <div class="title">
            <img src="../assets/img/启明.jpg" width="20" alt="交易管理" />
            个人信息管理
          </div>
          <ul class="list">
            <li :class="isshowcart == false ? 'active' : ''" @click="adress">
              地址管理
            </li>
          </ul>
        </aside>
        <article v-show="isshowcart">
          <div class="cart_title">
            <div class="cart1">商品信息</div>
            <div class="cart1">兑换金币</div>
            <div class="cart1">数量</div>
            <div class="cart1">操作</div>
          </div>
          <!-- <div
            v-for="(item, index) in shoppingCart"
            :key="index"
            class="cart_page"
          >
            <tbody>
              <tr>
                <td>
                  <section class="center">
                    <img width="84" :src="item.img" />
                    <div class="info">
                      <h5 style="">{{ item.name }}</h5>
                    </div>
                  </section>
                </td>
                <td class="center">{{ item.jiage }}</td>
                <td class="center">
                  <div class="step">
                    <el-input-number
                      size="small"
                      v-model="cartnum"
                    ></el-input-number>
                  </div>
                </td>
                <td class="center">{{ item.jiage * cartnum }}金币</td>
                <td class="center">
                  <el-button type="primary" icon="el-icon-delete"></el-button>
                </td>
              </tr>
            </tbody>
          </div> -->
          <div  v-for="(item,index) in shoppingCart" :key="index" class="cart_detail">
          <div><img :src=item.img alt="">
            <div class="cart1">{{item.name}}</div>
          </div>
          <div class="cart2">{{item.jiage}}</div>
          <div class="cart2">
            <button style="width: 40px;height: 40px;" @click="sub(index)">-</button>
             <span style="font-size: 20px;margin: 0px 10px;">{{item.goodsnum}}</span>
            <button style="width: 40px;height: 40px;"  @click="add(index)">+</button>
          </div>
            <div class="cart2"><button style="width: 40px;height: 40px;" @click="sc(index)">删除</button></div>
          </div>
          <div class="total">总计:{{allprice}}<span>金币</span></div>
          <div class="submit">结算</div>
        </article>
        <article v-show="!isshowcart">2</article>
      </main>
    </div>
  </div>
</template>
<script>
import Crumb from "@/components/Crumb.vue";
import { mapState ,mapActions} from "vuex";
import store from "@/store";
export default {
  data() {
    return {
      isshowcart: true,
      shoppingCart: [],
      shoppingCart2: [],
      cartnum: 1,
      allprice:0
    };
  },
  created() {
    // 将商品的信息传到shoppingCart中
    this.shoppingCart = JSON.parse(sessionStorage.getItem("user"));
    this.shoppingCart2 = JSON.parse(sessionStorage.getItem("user"));
    // console.log(this.shoppingCart);
  },
  computed: {
    ...mapState({
      userInfo: (state) => state.userInfo.userInfo,
    }),
  },
  components: {
    Crumb,
  },
  mounted(){
    this.getTOtalPrice();

  },
  methods: {
    ...mapActions({
      asyncchangeIsShowToast:"toastStatus/asyncchangeIsShowToast"
    }),
    // getTOtalPrice() {
    //         // 总计
    //         let pric = 0;
    //         this.shoppingCart.forEach((item, index) => {
    //             pric += item.goodsnum * this.shoppingCart2[index].jiage
    //         })
    //         pric=this.allprice
    //     },
    sub(index){
      // this.shoppingCart[index].jiage += this.shoppingCart2[index].jiage

      if(this.shoppingCart[index].goodsnum<=1){
        return this.asyncchangeIsShowToast({
        msg:"商品数量为1不可减少!!",
        type:"warning",
      })
      }else{
        this.shoppingCart[index].goodsnum--;
      }
      this.getTOtalPrice()
    },
    add(index){
      // this.shoppingCart[index].jiage += this.shoppingCart2[index].jiage

      this.shoppingCart[index].goodsnum++;
      this.getTOtalPrice()
    },
    // btn(bool, index) {
    //         let shopIndex = this.shoppingCart[index]
    //         // 判断为true还是false，true则加，false则减
    //         if (bool) {
    //             // 加
    //             shopIndex.goodsnum++;
    //             this.shoppingCart[index].jiage += this.shoppingCart2[index].jiage
    //         } else {
    //             // 减
    //             // 当数量小于1的时候直接返回
    //             if (shopIndex.sl <= 1) {
    //                 return;
    //             }
    //             shopIndex.goodsnum--;
    //             this.shoppingCart[index].jiage -= this.shoppingCart2[index].jiage

    //         }
    //         // 每点击一次重新计算一次总价
    //         this.getTOtalPrice();
        // },
        getTOtalPrice() {
            // 总计
            let pric = 0;
            this.shoppingCart.forEach((item, index) => {
                pric += item.goodsnum * this.shoppingCart2[index].jiage
            })
            // 保留两位数
            this.allprice = pric.toFixed(2)
        },
        sc(index) {
            this.shoppingCart.splice(index, 1)
            // this.num -= 1
            sessionStorage.removeItem("user")
            // if (this.num === 0) {
            //     this.kong = true
            //     this.gongji = false
            // } else {
            //     this.kong = false
            //     this.gongji = true
            // }
            this.getTOtalPrice();

        },


    loginOutFn() {
      localStorage.removeItem("x-auth-token");
      setTimeout(() => {
        this.$router.push("/home");
      }, 2000);
    },
    cart() {
      this.isshowcart = true;
    },
    adress() {
      this.isshowcart = false;
    },
  },
  beforeRouteEnter(to, from, next) {
    // 在渲染该组件的对应路由被 confirm 前调用
    // 不！能！获取组件实例 `this`
    // 因为当守卫执行前，组件实例还没被创建
    let token = localStorage.getItem("x-auth-token");
    if (token) {
      next();
    } else {
      // 提示没有登录
      store._actions["toastStatus/asyncChanIsShowToast"][0]({
        msg: "你还没有登录！2222",
        type: "danger",
      });
    }
  },
};
</script>
<style lang="less" scoped>
@import "../assets/css/global.less";
.person_page {
  background: #fff;
  main {
    border-top: 1px solid #e1e1e1;
    padding: 28px 0 48px;
    display: flex;
    justify-content: space-between;
    background: #fff;
    .cart_page {
      .center {
        text-align: center;
      }
    }
    aside {
      width: 200px;
      height: 740px;
      background: #e7e7e7;
      margin-right: 60px;
      box-sizing: border-box;
      padding: 30px 18px 0;
      .avatar {
        width: 100px;
        height: 100px;
        margin: auto;
        background-size: 100% 100%;
        background-repeat: no-repeat;
      }
      .name {
        text-align: center;
        margin-top: 19px;
        margin-bottom: 43px;
        span {
          text-decoration: underline;
          color: #2a5df1;
        }
      }
      .title {
        font-size: 16px;
        color: #333333;
        display: flex;
        align-items: center;
        margin-bottom: 14px;
        img {
          margin-right: 6px;
        }
      }
      .list {
        li {
          margin-bottom: 17px;
          font-weight: 300;
          color: #666666;
          cursor: pointer;
          &.active {
            color: @base-color;
            font-weight: bold;
            &::before {
              width: 2px;
              height: 14px;
              background: @base-color;
              display: inline-block;
              content: "";
              margin-right: 10px;
            }
          }
        }
      }
    }
    article {
      flex: 1;
      padding: 20px 0 0 0px;
      box-sizing: border-box;
      background: #fff;
    }
  }
}
.cart_title{
  display: flex;
  justify-content: space-between;
}
.cart1{
width: 180px;
border: 1px solid black;
text-align: center;
}
.cart_detail{
  display: flex;
  justify-content: space-between;

  width: 940px;
  img{
    width: 180px;
  }
}
.cart2{
width: 180px;
border: 1px solid black;
text-align: center;
height: 206px;
line-height: 180px;
}
</style>